import React from 'react';
import PropTypes from 'prop-types';
import css from './index.less';

import Shader from './shader';
import SkuBox from './skuBox';
import Header from './header';
import Linear from './linear';
import Remark from './remark';


const toTmUrl = (itemId, skuId) => {
  const base = 'https://detail.tmall.com/item.htm';
  if (skuId) {
    return `${base}?id=${itemId}&skuId=${skuId}`;
  }
  return `${base}?id=${itemId}`;
};

export default class Detail extends React.Component {
  static propsTypes = {};
  static defaultProps = {
    itemDetail: {
      'skuProps': [
        {
          'propId': '1627207',
          'propName': '颜色分类',
          'values': {
            '28320': {
              'valueId': '28320',
              'name': '白色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1EZv8gk9WBuNjSspeL6Sz5VXa'
            },
            '28338': {
              'valueId': '28338',
              'name': '蓝色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1cdk6byAnBKNjSZFvL6STKXXa'
            },
            '28340': {
              'valueId': '28340',
              'name': '深蓝色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1EbJRk7yWBuNjy0FpL6SssXXa'
            },
            '130164': {
              'valueId': '130164',
              'name': '花色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1zFzbk9tYBeNjSspaL6SOOFXa'
            },
            '3232480': {
              'valueId': '3232480',
              'name': '粉红色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1jblpkYGYBuNjy0FoL6UiBFXa'
            },
            '3232481': {
              'valueId': '3232481',
              'name': '巧克力色',
              'imgUrl': 'https://img.alicdn.com/bao/uploaded/TB1qmShk7CWBuNjy0FaL6RUlXXa'
            }
          }
        },
        {
          'propId': '122216343',
          'propName': '参考身高',
          'values': {
            '568': {'valueId': '568', 'name': '110cm'},
            '33273': {'valueId': '33273', 'name': '100cm'},
            '3264519': {'valueId': '3264519', 'name': '80cm'},
            '3285954': {'valueId': '3285954', 'name': '130cm'},
            '3339140': {'valueId': '3339140', 'name': '90cm'},
            '50792021': {'valueId': '50792021', 'name': '120cm'}
          }
        }],
      'skusMapValues': {
        '3616324565310': {'quantity': 43, 'price': '668.00', 'barcode': '6933833132997'},
        '3616324565313': {'quantity': 53, 'price': '199.00', 'barcode': '6933833132997'},
        '3616324565312': {'quantity': 134, 'price': '188.00', 'barcode': '6933833132997'},
        '3616324565315': {'quantity': 162, 'price': '199.00', 'barcode': '6933833132997'},
        '3616324565314': {'quantity': 84, 'price': '199.00', 'barcode': '6933833132997'},
        '3616324565311': {'quantity': 20, 'price': '199.00', 'barcode': '6933833132997'},
        '3616324565298': {'quantity': 42, 'price': '199.00', 'barcode': '6933833132973'},
        '3616324565301': {'quantity': 52, 'price': '199.00', 'barcode': '6933833132973'},
        '3616324565300': {'quantity': 127, 'price': '199.00', 'barcode': '6933833132973'},
        '3616324565303': {'quantity': 160, 'price': '199.00', 'barcode': '6933833132973'},
        '3616324565302': {'quantity': 83, 'price': '222.00', 'barcode': '6933833132973'},
        '3616324565299': {'quantity': 19, 'price': '199.00', 'barcode': '6933833132973'},
        '3764685374481': {'quantity': 111, 'price': '199.00', 'barcode': '6933833132539'},
        '3764685374482': {'quantity': 108, 'price': '199.00', 'barcode': '6933833132539'},
        '3764685374483': {'quantity': 207, 'price': '199.00', 'barcode': '6933833132539'},
        '3764685374484': {'quantity': 303, 'price': '199.00', 'barcode': '6933833132539'},
        '3764685374485': {'quantity': 215, 'price': '199.00', 'barcode': '6933833132539'},
        '3764685374486': {'quantity': 98, 'price': '199.00', 'barcode': '6933833132539'},
        '3616324565304': {'quantity': 123, 'price': '199.00', 'barcode': '6933833132423'},
        '3616324565307': {'quantity': 131, 'price': '199.00', 'barcode': '6933833132423'},
        '3616324565306': {'quantity': 260, 'price': '666.00', 'barcode': '6933833132423'},
        '3616324565309': {'quantity': 346, 'price': '199.00', 'barcode': '6933833132423'},
        '3616324565308': {'quantity': 229, 'price': '199.00', 'barcode': '6933833132423'},
        '3616324565305': {'quantity': 105, 'price': '999.00', 'barcode': '6933833132423'},
        '3616324565292': {'quantity': 123, 'price': '199.00', 'barcode': '6933833132416'},
        '3616324565295': {'quantity': 129, 'price': '199.00', 'barcode': '6933833132416'},
        '3616324565294': {'quantity': 269, 'price': '199.00', 'barcode': '6933833132416'},
        '3616324565297': {'quantity': 345, 'price': '199.00', 'barcode': '6933833132416'},
        '3616324565296': {'quantity': 243, 'price': '199.00', 'barcode': '6933833132416'},
        '3616324565293': {'quantity': 108, 'price': '199.00', 'barcode': '6933833132416'},
        '3764685374487': {'quantity': 125, 'price': '444.00', 'barcode': '6933833132553'},
        '3764685374488': {'quantity': 116, 'price': '199.00', 'barcode': '6933833132553'},
        '3764685374489': {'quantity': 262, 'price': '199.00', 'barcode': '6933833132553'},
        '3764685374490': {'quantity': 349, 'price': '199.00', 'barcode': '6933833132553'},
        '3764685374491': {'quantity': 233, 'price': '199.00', 'barcode': '6933833132553'},
        '3764685374492': {'quantity': 108, 'price': '199.00', 'barcode': '6933833132553'}
      },
      'skusMapKeys': [
        {
          'skuId': 3616324565310,
          'propPath': '1627207:3232481;122216343:3264519'
        }, {'skuId': 3616324565313, 'propPath': '1627207:3232481;122216343:3339140'}, {
          'skuId': 3616324565312,
          'propPath': '1627207:3232481;122216343:33273'
        }, {'skuId': 3616324565315, 'propPath': '1627207:3232481;122216343:568'}, {
          'skuId': 3616324565314,
          'propPath': '1627207:3232481;122216343:50792021'
        }, {'skuId': 3616324565311, 'propPath': '1627207:3232481;122216343:3285954'}, {
          'skuId': 3616324565298,
          'propPath': '1627207:28340;122216343:3264519'
        }, {'skuId': 3616324565301, 'propPath': '1627207:28340;122216343:3339140'}, {
          'skuId': 3616324565300,
          'propPath': '1627207:28340;122216343:33273'
        }, {'skuId': 3616324565303, 'propPath': '1627207:28340;122216343:568'}, {
          'skuId': 3616324565302,
          'propPath': '1627207:28340;122216343:50792021'
        }, {'skuId': 3616324565299, 'propPath': '1627207:28340;122216343:3285954'}, {
          'skuId': 3764685374481,
          'propPath': '1627207:28320;122216343:3264519'
        }, {'skuId': 3764685374482, 'propPath': '1627207:28320;122216343:3339140'}, {
          'skuId': 3764685374483,
          'propPath': '1627207:28320;122216343:33273'
        }, {'skuId': 3764685374484, 'propPath': '1627207:28320;122216343:568'}, {
          'skuId': 3764685374485,
          'propPath': '1627207:28320;122216343:50792021'
        }, {'skuId': 3764685374486, 'propPath': '1627207:28320;122216343:3285954'}, {
          'skuId': 3616324565304,
          'propPath': '1627207:3232480;122216343:3264519'
        }, {'skuId': 3616324565307, 'propPath': '1627207:3232480;122216343:3339140'}, {
          'skuId': 3616324565306,
          'propPath': '1627207:3232480;122216343:33273'
        }, {'skuId': 3616324565309, 'propPath': '1627207:3232480;122216343:568'}, {
          'skuId': 3616324565308,
          'propPath': '1627207:3232480;122216343:50792021'
        }, {'skuId': 3616324565305, 'propPath': '1627207:3232480;122216343:3285954'}, {
          'skuId': 3616324565292,
          'propPath': '1627207:130164;122216343:3264519'
        }, {'skuId': 3616324565295, 'propPath': '1627207:130164;122216343:3339140'}, {
          'skuId': 3616324565294,
          'propPath': '1627207:130164;122216343:33273'
        }, {'skuId': 3616324565297, 'propPath': '1627207:130164;122216343:568'}, {
          'skuId': 3616324565296,
          'propPath': '1627207:130164;122216343:50792021'
        }, {'skuId': 3616324565293, 'propPath': '1627207:130164;122216343:3285954'}, {
          'skuId': 3764685374487,
          'propPath': '1627207:28338;122216343:3264519'
        }, {'skuId': 3764685374488, 'propPath': '1627207:28338;122216343:3339140'}, {
          'skuId': 3764685374489,
          'propPath': '1627207:28338;122216343:33273'
        }, {'skuId': 3764685374490, 'propPath': '1627207:28338;122216343:568'}, {
          'skuId': 3764685374491,
          'propPath': '1627207:28338;122216343:50792021'
        }, {'skuId': 3764685374492, 'propPath': '1627207:28338;122216343:3285954'}],
      'goodsTaobaoId': '16265457562',
      'customTitle': null,
      'customPrice': '300',
      'customPicUrl': null,
      'customShowPic': null,
      'customDescription': 'https://img.alicdn.com/bao/uploaded/i2/1771975008/TB1gQwla8jTBKNjSZFDXXbVgVXa_!!0-item_pic.jpg',
      'customBarcode': null,
      'picUrl': 'https://img.alicdn.com/bao/uploaded/i2/1771975008/TB2eZNOk1SSBuNjy0FlXXbBpVXa_!!1771975008-0-item_pic.jpg',
      'title': '歌瑞家男童女童套装多色2018夏中大童套装两件套背心短裤套装乐友',
      'price': '199.00',
      'barCode': null,
      'buyShow': JSON.stringify([
        {
          'picture': 'http://img01.daily.taobaocdn.net/tfscom/i2/15782035348358/TB2BadXXXXXXXXEXXXXXXXXXXXX_ !!2066955782-0-rate.jpg',
          'pic_meta': '[{"height":411,"pic":"https://img.alicdn.com/imgextra/i4/1862941194/TB2ER9mpVXXXXaCXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2PVygpVXXXXbBXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2t.9bpVXXXXbEXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i1/1862941194/TB2GyXQpVXXXXbvXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629}]',
          'item_id': 1500017235792,
          'id': 123,
          'description': '第一条发货快发货快发货快发货快发货快发货快发货快发货快发货快发货快',
          'seller_id': 2065340343,
          'buyer_nick': '1r***1',
          'mix_buyer_nick': 'r01HKzPtEFlPg4MS+tnNmo7LrFFkqRzgY+65Ye6O+bVpZAu003d1',
          'buyer_stars': 12,
          'share_source': 0,
          'pv': 123,
          'status': 0,
          'tag_names': '女神',
          'comment': '非常好的评论'
        },
        {
          'picture': 'http://img01.daily.taobaocdn.net/tfscom/i2/15782035348358/TB2BadXXXXXXXXEXXXXXXXXXXXX_ !!2066955782-0-rate.jpg',
          'pic_meta': '[{"height":411,"pic":"https://img.alicdn.com/imgextra/i4/1862941194/TB2ER9mpVXXXXaCXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2PVygpVXXXXbBXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2t.9bpVXXXXbEXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i1/1862941194/TB2GyXQpVXXXXbvXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629}]',
          'item_id': 1500017235792,
          'id': 123,
          'description': '第一条发货快发货快发货快发货快发货快发货快发货快发货快发货快发货快',
          'seller_id': 2065340343,
          'buyer_nick': '1r***1',
          'mix_buyer_nick': 'r01HKzPtEFlPg4MS+tnNmo7LrFFkqRzgY+65Ye6O+bVpZAu003d1',
          'buyer_stars': 12,
          'share_source': 0,
          'pv': 123,
          'status': 0,
          'tag_names': '女神',
          'comment': '非常好的评论'
        },
        {
          'picture': 'http://img01.daily.taobaocdn.net/tfscom/i2/15782035348358/TB2BadXXXXXXXXEXXXXXXXXXXXX_ !!2066955782-0-rate.jpg',
          'pic_meta': '[{"height":411,"pic":"https://img.alicdn.com/imgextra/i4/1862941194/TB2ER9mpVXXXXaCXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2PVygpVXXXXbBXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2t.9bpVXXXXbEXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i1/1862941194/TB2GyXQpVXXXXbvXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629}]',
          'item_id': 1500017235792,
          'id': 123,
          'description': '第一条发货快发货快发货快发货快发货快发货快发货快发货快发货快发货快',
          'seller_id': 2065340343,
          'buyer_nick': '1r***1',
          'mix_buyer_nick': 'r01HKzPtEFlPg4MS+tnNmo7LrFFkqRzgY+65Ye6O+bVpZAu003d1',
          'buyer_stars': 12,
          'share_source': 0,
          'pv': 123,
          'status': 0,
          'tag_names': '女神',
          'comment': '非常好的评论'
        },
        {
          'picture': 'http://img01.daily.taobaocdn.net/tfscom/i2/15782035348358/TB2BadXXXXXXXXEXXXXXXXXXXXX_ !!2066955782-0-rate.jpg',
          'pic_meta': '[{"height":411,"pic":"https://img.alicdn.com/imgextra/i4/1862941194/TB2ER9mpVXXXXaCXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2PVygpVXXXXbBXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i2/1862941194/TB2t.9bpVXXXXbEXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629},{"height":411,"pic":"https://img.alicdn.com/imgextra/i1/1862941194/TB2GyXQpVXXXXbvXXXXXXXXXXXX-1862941194.jpg","size":35522,"width":629}]',
          'item_id': 1500017235792,
          'id': 123,
          'description': '第一条发货快发货快发货快发货快发货快发货快发货快发货快发货快发货快',
          'seller_id': 2065340343,
          'buyer_nick': '1r***1',
          'mix_buyer_nick': 'r01HKzPtEFlPg4MS+tnNmo7LrFFkqRzgY+65Ye6O+bVpZAu003d1',
          'buyer_stars': 12,
          'share_source': 0,
          'pv': 123,
          'status': 0,
          'tag_names': '女神',
          'comment': '非常好的评论'
        },
      ]),
    },
  };

  constructor(props) {
    super(props);
    this.state = {};
    props.itemDetail.skuProps.forEach(i => {
      this.state[i.propId] = '';
    });
  }

  onChangePropValue = (propName, propValue, propImg) => {
    this.setState({
      [propName]: this.state[propName] === propValue ? '' : propValue,
      skuImg: propImg, // 加入图片动态改变，有问题
    });
  };

  get ComputedSkuId() {
    const {itemDetail: {skusMapKeys, skusMapValues}} = this.props;
    for (const {skuId, propPath} of skusMapKeys) {
      // console.log('state', this.state);
      const _arr = Object.entries(this.state);
      inter: {
        const [key, value] = _arr[0]; // 本来是i的，但是这个项目只有颜色分类故可以使用
        // console.log('_arr', _arr);
        if (value && propPath.includes(value)) {
          return {
            skuId: skuId,
            // skuPrice: skusMapValues[skuId].price,
            skuPrice: skusMapValues[skuId].price.split('.')[0],
          };
        }
      }
      // for (let i = 0; i < _arr.length; ++i) {
        //   const [key, value] = _arr[i];
        //   // console.log('_arr', _arr);
        //   if (value && propPath.includes(value)) {
        //     if (i === _arr.length - 1) {
        //       return {
        //         skuId: skuId,
        //         // skuPrice: skusMapValues[skuId].price,
        //         skuPrice: skusMapValues[skuId].price.split('.')[0],
        //       };
        //     }
        //   } else {
        //     break inter;
        //   }
        // }

    }
    return {};
  };

  renderLeft = () => {
    // data transfer help Method
    const skuPropsAdapter = (obj) => {
      const _obj = {};
      for (const key of Object.keys(obj)) {
        if (key === 'values') {
          _obj[key] = Object.values(obj[key]);
        } else {
          _obj[key] = obj[key];
        }
      }
      _obj.isImage = obj.propName === '颜色分类';
      return _obj;
    };

    const {skuImg} = this.state;
    const {skuPrice, skuId} = this.ComputedSkuId;
    const {itemDetail} = this.props;
    const headerProps = {
      data: {
        goodsTaobaoId: itemDetail.goodsTaobaoId,
        title: itemDetail.customTitle || itemDetail.title,
        price: skuPrice || itemDetail.customPrice || itemDetail.price,
        picUrl: skuImg || itemDetail.customPicUrl || itemDetail.picUrl,
        itemUrl: toTmUrl(itemDetail.goodsTaobaoId, skuId), // 拼接的二维码
      }
    };
    const skuBoxProps = {
      skuProps: itemDetail.skuProps.map(i => skuPropsAdapter(i)),
      otherState: {
        ...this.state,
      },
      onClick: this.onChangePropValue,
    };

    return (
      <div className={css.left}>
        <Header {...headerProps}/>
        {Boolean(itemDetail.skuProps.length) && <SkuBox {...skuBoxProps} />}
      </div>
    );
  };

  render() {
    return (
      <div className={css.wrapper}>
        {this.renderLeft()}
      </div>
    );
  }
}
